<template>
	<view>
		<!-- #ifndef H5 -->
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<cover-view class="headerbox"  :style="{height:topHeight+'px',paddingTop:paddingHeight+'px'}">
			<cover-view class="search_box" :style="{width:searchWidth+'rpx'}" @click="searchType">
				<cover-image :src="BASE_IMG_URL+'ss.png'" class="icon-search"></cover-image>
				<cover-view class="self_search">搜索</cover-view>
			</cover-view>
		</cover-view>
		<cover-view :style="{height:topHeight+'px'}"></cover-view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="headerbox_h5" >
			<view class="search_box" :style="{width:searchWidth+'rpx'}" @click="searchType">
				<!-- <view class="iconfont icon-search"></view> -->
				<image :src="BASE_IMG_URL+'search.png'" class="iconsearch" mode="scaleToFill"></image>
				<input type="text" disabled placeholder="搜索" class="self_search">
			</view>
		</view>
		<!-- #endif -->
		<view class="topbox">
			<view class="top_warp">
				<view class="top_fir" @click="authClick('toOpencard')">
					<image :src="BASE_IMG_URL+'index_btn_1.png'" mode="scaleToFill"></image>
					<view>开卡</view>
				</view>
				<view class="top_fir" @click="authClick('toConsume')">
					<image :src="BASE_IMG_URL+'index_btn_2.png'" mode="scaleToFill"></image>
					<view>消费</view>
				</view>
				<view class="top_fir" @click="authClick('toUpdateCard')">
					<image :src="BASE_IMG_URL+'index_btn_20.png'" mode="scaleToFill"></image>
					<view>充卡</view>
				</view>
				<view class="top_fir" @click="authClick('createClineClick')">
					<image :src="BASE_IMG_URL+'index_btn_3.png'" mode="scaleToFill"></image>
					<view>客户登记</view>
				</view>
				<!-- <view class="top_fir" @click="authClick('toRecord')">
					<image :src="BASE_IMG_URL+'index_btn_4.png'" mode="scaleToFill"></image>
					<view>跟进记录</view>
				</view> -->
			</view>
		</view>
		<view class="fun_warp">
			<view class="fun_top">
				<view class="fun_tit">常用功能</view>
			</view>
			<view class="fun_box">
				<view class="fun_fir" @click="authClick('aiDayReport')"  v-if="isBoss" >
					<image :src="BASE_IMG_URL+'icons/index-10.png'" mode="scaleToFill"></image>
					<view>智能日报</view>
				</view>
				<view class="fun_fir" @click="authClick('collectClick')"  v-if="isBoss && !FDGG" >
					<image :src="BASE_IMG_URL+'index_btn_11.png'" mode="scaleToFill"></image>
					<view>机构总表</view>
				</view>
				<view class="fun_fir" @click="authClick('toOrderMgr')">
					<image :src="BASE_IMG_URL+'index_btn_5.png'" mode="scaleToFill"></image>
					<view>订单管理</view>
				</view>
				<view class="fun_fir" @click="authClick('toCustomer')">
					<image :src="BASE_IMG_URL+'index_btn_6.png'" mode="scaleToFill"></image>
					<view>客户管理</view>
				</view>
				<view class="fun_fir" @click="authClick('toPriceList')">
					<image :src="BASE_IMG_URL+'index_btn_17.png'" mode="scaleToFill"></image>
					<view>价目表</view>
				</view>
				<view class="fun_fir" @click="authClick('toNursingOrderList')">
					<image :src="BASE_IMG_URL+'index_btn_7.png'" mode="scaleToFill"></image>
					<view>护理日志</view>
				</view>
				<view class="fun_fir" @click="authClick('toRecord')">
					<image :src="BASE_IMG_URL+'index_btn_8.png'" mode="scaleToFill"></image>
					<view>回访跟进</view>
				</view>
				<view class="fun_fir" @click="authClick('appoint_center')">
					<image :src="BASE_IMG_URL+'index_btn_9.png'" mode="scaleToFill"></image>
					<view>客户预约</view>
				</view>
				<view class="fun_fir" @click="authClick('toTarget')">
					<image :src="BASE_IMG_URL+'index_btn_10.png'" mode="scaleToFill"></image>
					<view>业绩目标</view>
				</view>
				<view class="fun_fir" @click="authClick('achievementObjectClick')" v-if="false" >
					<image :src="BASE_IMG_URL+'index_btn_11.png'" mode="scaleToFill"></image>
					<view>业绩完成度</view>
				</view>
				<view class="fun_fir" @click="authClick('personRankClick')"  v-if="isBoss">
					<image :src="BASE_IMG_URL+'index_btn_12.png'" mode="scaleToFill"></image>
					<view>业绩排行</view>
				</view>
				<!-- <view class="fun_fir" @click="collectClick">
					<image :src="BASE_IMG_URL+'index_btn_11.png'" mode="scaleToFill"></image>
					<view>销售简报</view>
				</view> 
			 <view class="fun_fir" @click="paymentRankClick">
					<image :src="BASE_IMG_URL+'index_btn_11.png'" mode="scaleToFill"></image>
					<view>回款排名</view>
				</view> -->  
				<view class="fun_fir" @click="authClick('workreport')">
					<image :src="BASE_IMG_URL+'index_btn_13.png'" mode="scaleToFill"></image>
					<view>工作日报</view>
				</view>
				<view class="fun_fir" @click="daka">
					<image :src="BASE_IMG_URL+'index_btn_14.png'" mode="scaleToFill"></image>
					<view>考勤打卡</view>
				</view>
				<view class="fun_fir" @click="shougongfei"  v-if="isStaff">
					<image :src="BASE_IMG_URL+'shougongfei.png'" mode="scaleToFill"></image>
					<view>手工费</view>
				</view>
				<view class="fun_fir" @click="dailyInEx">
					<image :src="BASE_IMG_URL+'index_btn_11.png'" mode="scaleToFill"></image>
					<view>收支薄</view>
				</view>

				<view class="fun_fir" @click="affiche"  v-if="isStaff">
					<image :src="BASE_IMG_URL+'index_btn_15.png'" mode="scaleToFill"></image>
					<view>公告信息</view>
				</view>

			</view>

		</view> 
		<!-- 数据简报 -->
		<view class="pre-right"  v-if="isBoss" >
			<picker v-if="!FDGG" @change="changeStore" :range="storeList" :value="storeIndex" :range-key="'storeName'" >
				<view class="form_right">
					<view style="margin-right:15rpx">
						{{storeList[storeIndex] ? storeList[storeIndex].storeName : '点击选择'}}
					</view>
					<image :src="BASE_IMG_URL+'newxia.png'" class="bottomimg" mode="scaleToFill"></image>
				</view>
			</picker>
			<picker  v-if="isStaff" @change="changeType" :range="typeList" :value="typeIndex">
				<view class="form_right">
					<view style="margin-right:15rpx">{{typeList[typeIndex] ? typeList[typeIndex] : '点击选择'}}</view>
					<image :src="BASE_IMG_URL+'newxia.png'" class="bottomimg" mode="scaleToFill"></image>
				</view>
			</picker>
			<picker mode="date" v-if="false" fields="month" @change="changeDataTime">
				<view class="form_right" style="margin-right:0">
					<view style="margin-right:15rpx">{{dataTime ? dataTime : '点击选择'}}</view>
					<image :src="BASE_IMG_URL+'newxia.png'" class="bottomimg" mode="scaleToFill"></image>
				</view>
			</picker>
			<picker  @change="changeRead" :range="readList" :range-key="'text'"  :value="readIndex">
				<view class="form_right">
					<view>{{readList[readIndex] ? readList[readIndex].text : '请选择'}}</view>
					<image :src="BASE_IMG_URL+'newxia.png'" class="bottomimg"  mode="scaleToFill"></image>
				</view>
			</picker>
		</view>
		<view class="dataPre"  v-if="isBoss">
			<view class="pre_list">
				<view class="pre_title">
					业绩简报
				</view>
			</view>
			<view class="pre_content">
				<view class="content_item">
					<view>￥{{shopStat.sales_total ? shopStat.sales_total :'0'}}</view>
					<view>总销售</view>
				</view>
				<view class="content_item">
					<view>￥{{shopStat.consume_total ? shopStat.consume_total :'0'}}</view>
					<view>总实耗</view>
				</view>
				<view class="content_item">
					<view>{{ shopStat.renci_count }}</view>
					<view>总客流</view>
				</view>
				<view class="content_item">
					<view>{{perShopNum}}</view>
					<view>人均到店</view>
				</view>
				<view class="content_item">
					<view>{{shopStat.rentou_count ? shopStat.rentou_count :'0'}}</view>
					<view>总人头</view>
				</view>
				<view class="content_item">
					<view>{{shopStat.newmember_count}}</view>
					<view>新客数</view>
				</view>
			</view>
		</view>
		<!-- 业绩目标 -->
		<view class="body_head"  v-if="isStaff">
			<view class="con_title">业绩目标</view>
			<view class="con_head">
				<view class="dountChart">
					<u-circle-progress active-color="#2979ff" :percent='percentage' width=250 ref="canvas">
						<view class="u-progress-content">
							<view class="u-progress-dot"></view>
							<view class='u-progress-info'>{{percentage}}%</view>
							<view class='u-progress-info'>已完成</view>
						</view>
					</u-circle-progress>
				</view>
				<view class="money_show">
					<view class="money_target">
						<view>目标金额</view>
						<view>&yen; {{target_money}}</view>
					</view>
					<view class=".money_target">
						<view>完成金额</view>
						<view>&yen; {{complete_money}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bargin_con body_head"  v-if="deal_list.length > 0">
			<view class="con_title">当月业绩完成率</view>
			<view class="progress_bar" v-for="(item,index) in deal_list" :key="index">
				<view><text>{{item.rank}}</text>{{item.name}}</view>
				<view class="pro_out">
					<view class="pro_in" style="background: #d9001b" v-if="index == 3 || index == 4 || index == 5"
						:style="{width: item.ratio+'%'}"></view>
					<view class="pro_in" v-else :style="{width: item.ratio+'%'}"></view>
				</view>
			</view>
		</view>
		<!-- 底部导航 -->
		<uniTabbar v-if="tipNumber || tipNumber==0" :tipNumber="tipNumber"></uniTabbar>

	</view>
</template>

<script>
	import uniTabbar from '@/components/tabbar/tabbar.vue'
	import {
		BASE_IMG_URL
	} from '@/util/api.js'
	import {
		pageJumps,
		statisticalPageJumps,
		customerPageJumps
	} from "@/pagesA/crm/crm_page_jumps.js";
	import {
		netAgentList
	} from '@/api/clues.js'
	import {
		getNowData
	} from '@/util/weekTime.js'
	import {
		netGetBriefdata,
		netTurnoverList
	} from '@/api/kehu.js'
	import {
		netGetData
	} from '@/api/index.js'
	import {
		netMapKey,
		getAppCtx,  
		netGetChainStoreList
	} from '@/api/login.js'

	export default {
		mixins: [pageJumps, statisticalPageJumps, customerPageJumps],
		components: {
			uniTabbar
		},
		data() {
			return {
				appCtx: {},
				storeIndex:0,
				storeList: [],  
				tableFrom: {
					dateLimit: 'lately7',
					storeid: '',
			    },
				isBoss: false,
				FDGG: false,
				
				shopStat: {
					sales_total: 0,
					consume_total: 0,
					shopsum: 0,
					newmember_count: 0,
					rentou_count: 0,
					renci_count: 0
				}, 
				topHeight: 0,
				paddingHeight: 0,
				searchWidth: 470,
				BASE_IMG_URL: BASE_IMG_URL,
				tipNumber: null,
				readList:[],
				readIndex:0,
				typeList: ['本人及下属', '仅本人', '仅下属'],
				typeIndex: 0,
				dataTime: '',
				info: {}, //数据简报 数据
				target_money: 0, //目标金额
				complete_money: 0, //完成 金额
				percentage: 0, //百分比
				shows: false,
				deal_list: [], //排行榜
			}
		},
		computed: {
			perShopNum: function() {
				var that = this;
				if (that.shopStat.rentou_count > 0) {
					return (that.shopStat.renci_count / that.shopStat.rentou_count).toFixed(1);
				}
				return 0;
			},
			isStaff: function() {
				var that = this;
				 
				return !that.isBoss;
			}
		},
		onLoad() {

			//获取设备信息
			uni.getSystemInfo({
				success: (res) => {
					let HeaderBar = 0
					// #ifdef MP-WEIXIN
					let rect = wx.getMenuButtonBoundingClientRect();
					HeaderBar = rect.height + (rect.top - res.statusBarHeight) * 2 + res.statusBarHeight;
					this.topHeight = HeaderBar;
					this.paddingHeight = rect.top
					this.searchWidth = 470
					// #endif
					// #ifdef MP-ALIPAY || APP-PLUS
					HeaderBar = res.pixelRatio * res.statusBarHeight
					this.topHeight = HeaderBar
					this.paddingHeight = res.statusBarHeight
					this.searchWidth = 690
					// #endif
					// #ifdef H5 
					this.topHeight = 72
					this.paddingHeight = 24
					this.searchWidth = 690
					// #endif
				}
			})
		},
		onShow() {
			this.roleType = uni.getStorageSync('roleType')
			this.rules = uni.getStorageSync('rules')
			this.dataTime = getNowData().substr(0, 7)
			this.appCtx = getAppCtx()
			
		    this.readList = this.$constants.achieveRecentList.fromTxt;
			if(this.appCtx.loginedUser) {
				
				if(this.appCtx.loginedUser.roleType == 10) {
					this.isBoss = true
				} else if( this.appCtx.loginedUser.roleType == 20) {
					this.isBoss = true
					this.FDGG = true
				}
			}
			console.log(this.appCtx)
			if (uni.getStorageSync('isAuth')) {
				this.getStoreList()
				this.getTip()
			} else {
				this.tipNumber = 0
			}
		},
		methods: {

			changeRead(e) { 
				this.readIndex = e.detail.value
				this.getData()
			},
			authClick(url){
				console.log("========213==")
				if(!(uni.getStorageSync('isAuth')) || (this.rules && (this.rules.indexOf('all') != -1 || this.rules.indexOf(url) != -1))) {
					 
					if(url =='toOpencard') {
						this.toOpencard()
					} else if(url =='toConsume') {
						this.toConsume()
					} else if(url =='toUpdateCard') {
						this.toUpdateCard()
					} else if(url =='createClineClick') {
						this.createClineClick()
					} else if(url =='toRecord') {
						this.toRecord()
					} else if(url =='collectClick') {
						this.collectClick()
					} else if(url =='aiDayReport') {
						this.aiDayReport()
					} else if(url =='toOrderMgr') {
						this.toOrderMgr()
					} else if(url =='toCustomer') {
						this.toCustomer()
					} else if(url =='toPriceList') {
						this.toPriceList()
					}else if(url =='toNursingOrderList') {
						this.toNursingOrderList()
					} else if(url =='toRecord') {
						this.toRecord()
					} else if(url =='appoint_center') {
						this.appoint_center()
					}else if(url =='toTarget') {
						this.toTarget()
					} else if(url =='achievementObjectClick') {
						this.achievementObjectClick()
					} else if(url =='personRankClick') {
						this.personRankClick()
					} else if(url =='workreport') {
						this.workreport()
					}
				} else {
					uni.showToast({
						title: '无此权限，请联系店长或管理员',
						icon: 'none',
						duration: 2000
					})
					return
				}
				
			},
			searchType() {
				uni.navigateTo({
					url: '/pagesA/crm/search/searchList?type=1'
				})
			},
			  // 商户分类；
			  getStoreList() {

				const data = {
					storeName: '全部',
					storeId: ''
				}  
				netGetChainStoreList({type: 'all'}).then(res => {
					this.storeList = res.data
					if(this.storeList.length > 1 && this.appCtx.loginedUser.roleType == 10 ) {
						this.tableFrom.storeid = '' 
					} 
					this.storeList.unshift(data)
				}) 
				  
			 },
			 
			 changeStore(e) {
			 	this.storeIndex = e.detail.value
			 	this.tableFrom.storeid = this.storeList[e.detail.value].storeId
			 	this.getData()
			 },
			getOpenid() {
				netMapKey().then(res => {
					uni.setStorageSync('mapKey', res.data.map_key)
					uni.setStorageSync('appid', res.data.appid)
				})
			},
			 getTip() {
				netAgentList().then(res => {
					// uni.setStorageSync('token', res.data.userinfo.token)
					// uni.setStorageSync('roleType', res.data.userinfo.role_type)
					// uni.setStorageSync('rules', res.data.userinfo.rules)
					this.tipNumber = res.data.total
					//当月 数据 简报、
					this.getData()
					// 业绩目标
					this.getTarget()
					//获取appid
					// this.getOpenid()
				})
			},
			getData() {
				let params = {
					// date: this.dataTime,
					dateLimit: this.readList[this.readIndex].val,
					type: this.typeIndex
				}
				netGetBriefdata(params).then(res => {
					this.shopStat = res.data.shopStat
				})
			},
			getTarget() {
				let params = {
					date: this.dataTime,
					type: this.typeIndex
				}
				netGetData(params).then(res => {
					this.complete_money = res.data.contract_moneys
					this.target_money = res.data.achievement

					this.percentage = res.data.ratio
					this.deal_list = res.data.ranking
				})
			},
			changeType(e) {
				this.typeIndex = e.detail.value
				this.getData()
				this.getTarget()
			},
			changeDataTime(e) {
				this.dataTime = e.detail.value
				this.getData()
				this.getTarget()
			},
			//业绩目标
			toTarget() {
				if (this.roleType == 2 && (this.rules.indexOf('all') != -1 || this.rules.indexOf('2') != -1)) {
					uni.navigateTo({
						url: '/pagesA/crm/salesTarget/salesTarget',
					})
				} else {
					uni.navigateTo({
						url: '/pagesA/crm/salesTarget/myTarget',
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-progress-info {
		text-align: center;
	}

	.headerbox_h5 {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-top: var(--status-bar-height);
		padding-left: 30rpx;
		z-index: 9;
		background: #03aa96;
		box-sizing: border-box;
		width: 100%;
		height: 70rpx;

		.search_box {
			// width: 470rpx;
			height: 60rpx;
			border-radius: 30rpx;
			background: #fff;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0 15rpx;

			.iconsearch {
				width: 50rpx;
				height: 50rpx;
				margin-right: 20rpx;
			}

			.self_search {
				font-size: 24rpx;
				color: #333;
				height: 58rpx;
				line-height: 58rpx;
				padding: 0;
				margin: 0;
			}
		}
	}

	.headerbox {
		background: #03aa96;
		box-sizing: border-box;
		width: 100%;
		height: 150rpx;
		position: fixed;
		left: 0;
		top: 0rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-top: var(--status-bar-height);
		padding-left: 30rpx;
		z-index: 9;

		.search_box {
			height: 60rpx;
			border-radius: 30rpx;
			background: #fff;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0 15rpx;

			.icon-search {
				width: 35rpx;
				height: 35rpx;
				margin-right: 20rpx;
				position: relative;

				&::before {
					content: '';
					width: 0;
					height: 0;
				}
			}

			.self_search {
				font-size: 24rpx;
				color: #666;
				height: 58rpx;
				line-height: 58rpx;
				padding: 0;
				margin: 0;
			}
		}
	}

	.topbox {
		width: 100%;
		height: 100rpx;
		background: #03aa96;
		position: relative;
		margin-bottom: 110rpx;

		.top_warp {
			width: 702rpx;
			background: #fff;
			border-radius: 20rpx;
			position: absolute;
			left: 24rpx;
			top: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding: 30rpx 60rpx;
			text-align: center;
			box-shadow: 1rpx 1rpx 10rpx rgba(0, 0, 0, 0.1);

			.top_fir {
				font-size: 24rpx;
				color: #333;

				image {
					width: 50rpx;
					height: 50rpx;
					margin-bottom: 10rpx;
				}
			}
		}
	}

	.fun_warp {
		padding: 0 24rpx;

		.fun_top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 25rpx;

			.fun_tit {
				font-size: 26rpx;
				color: #000;
				font-weight: 700;
			}
		}

		.fun_box {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;

			.fun_fir {
				flex-shrink: 0;
				background: #fff;
				border-radius: 10rpx;
				text-align: center;
				width: 157rpx;
				height: 150rpx;
				box-shadow: 1rpx 1rpx 10rpx rgba(0, 0, 0, 0.1);
				margin-right: 24rpx;
				margin-bottom: 24rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				color: #000;

				&:nth-child(4n) {
					margin-right: 0;
				}

				image {
					width: 50rpx;
					height: 50rpx;
					margin-bottom: 15rpx;
				}
			}
		}
	}

	.pre-right {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 0 30rpx;
		margin: 20rpx 0 30rpx 0;

		.form_right {
			width: 180rpx;
			height: 50rpx;
			line-height: 48rpx;
			border-radius: 8rpx;
			background: #fff;
			margin-right: 15rpx;
			font-size: 22rpx;
			color: #666;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 2rpx 2rpx 50rpx rgba(0, 0, 0, 0.1);

			.bottomimg {
				width: 20rpx;
				height: 33rpx;
			}
		}

		// .newimg{
		// 	image{
		// 		width:20rpx;
		// 		height:33rpx;
		// 	}
		// }
	}

	.dataPre {
		background-color: #fff;
		border-radius: 10rpx;
		box-sizing: border-box;
		padding: 20rpx 0 40rpx;
		margin: 0 24rpx 30rpx 24rpx;
		border-radius: 20rpx;
		box-shadow: 1rpx 1rpx 10rpx rgba(0, 0, 0, 0.1);

		.pre_content {
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;

			.content_item {
				width: 33.33%;
				text-align: center;

				:first-child {
					font-size: 32rpx;
					font-weight: 600;
					margin-top: 26rpx;
					margin-bottom: 10rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				:last-child {
					font-size: 24rpx;
					padding: 0 20rpx;
					color: #000;
				}
			}
		}
	}

	.pre_list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;

		.pre_title {
			font-size: 28rpx;
			font-weight: 700;
		}
	}

	.body_head {
		width: 702rpx;
		margin: 0 auto;
		box-sizing: border-box;
		padding: 30rpx;
		border-radius: 20rpx;
		background: #fff;
		box-shadow: 1rpx 1rpx 10rpx rgba(0, 0, 0, 0.1);
		z-index: 5;

		.con_title {
			font-weight: 700;
			font-size: 28rpx;
		}

		.con_head {
			display: flex;

			.dountChart {
				margin-top: 70rpx;
				width: 350rpx;
				height: 350rpx;
				z-index: 0;
			}

			.money_show {
				padding-top: 45rpx;

				.money_target {
					:first-child {
						margin-bottom: 30rpx;
						color: #666;
					}

					:last-child {
						font-size: 40rpx;
						margin-bottom: 30rpx;
						color: #000;
					}
				}
			}
		}
	}

	.bargin_con {
		width: 702rpx;
		padding: 30rpx;
		background: #fff;
		border-radius: 20rpx;
		margin: 30rpx auto;
		box-sizing: border-box;
		box-shadow: 1rpx 1rpx 10rpx rgba(0, 0, 0, 0.1);

		.progress_bar {
			:first-child {
				padding: 30rpx 0;

				text {
					font-weight: 700;
					margin-right: 8rpx;
				}
			}

			.pro_out {
				width: 100%;
				height: 25rpx;
				background-color: #e4e4e4;
				border-radius: 15rpx;

				.pro_in {
					padding: 0;
					height: 25rpx;
					width: 80%;
					border-radius: 15rpx;
					background-color: #4bced0;
				}
			}
		}
	}
</style>
